<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    

    <title> Slider with Animated Blocks | RoyalSlider Example</title>

    <meta content="Touch-enabled image gallery and content slider plugin, that focuses on providing great user experience on every desktop and mobile device." name="description">
    <meta name="keywords" content="content slider, gallery, plugin, jquery, banner rotator">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
    <meta name="author" content="Dmitry Semenov">

    <!-- slider JS files -->
    
    <link href="../royalslider/royalslider.css" rel="stylesheet">
    <script  src="../royalslider/jquery-1.8.0.min.js"></script>
    <script src="../royalslider/jquery.royalslider.min.js"></script>
	
		<script src="../royalslider/jquery.easing-1.3.js"></script>
	
    <!-- syntax highlighter -->
    <script src="../preview-assets/js/highlight.pack.js"></script>
    <script src="../preview-assets/js/jquery-ui-1.8.22.custom.min.js"></script>
    <script> hljs.initHighlightingOnLoad();</script>
	
    <!-- preview-related stylesheets -->
    <link href="../preview-assets/css/reset.css" rel="stylesheet">
    <link href="../preview-assets/css/grid.css" rel="stylesheet">
    <link href="../preview-assets/css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet">
    <link href="../preview-assets/css/github.css" rel="stylesheet">
	
    <!-- slider stylesheets -->
    <link href="../royalslider/minimal-white/rs-minimal-white.css" rel="stylesheet">
	<link href="../preview-assets/css/main.css" rel="stylesheet">
	
<!-- slider css -->
<style>
	#slider-with-blocks-1 {width: 100%;}
	
	.rsContent {color: #FFF; font-size: 24px; line-height: 32px; float: left; }
	.bContainer { position: relative; }
	.rsABlock { position: relative; display: block; left: auto; top: auto; }
	.blockHeadline { font-size: 42px; line-height: 50px; }
	.blockSubHeadline { font-size: 32px; line-height: 40px }
	.txtCent { text-align: center;  width: 100%; }
	
	.slide1 { background: #f06b50; }
	.slide1 .bContainer { top: 36%; }
	.slide2 { background: #ffbc11; color:#000; }
	.slide2 .bContainer { top: 24px; }
	.slide2 .txtCent { line-height: 44px; }
	.slide2 .blockHeadline { line-height: 66px; }
	.slide3 { background: #45aab8; color:#FFF; }
	.slide3 .bContainer { top: 24px; }
	.slide3 span { line-height: 44px; }
	.slide4 .bContainer { position: absolute; left: 0; width: 100%; height: auto; top: 24px; }
	
	.photoCopy {position: absolute; line-height: 24px; font-size: 12px; background: black; color: white; background-color: rgba(0, 0, 0, 0.75); padding: 0px 10px; position: absolute; left: 12px; bottom: 12px; top: auto; border-radius: 2px; z-index: 25; }
	.photoCopy a { color: #FFF; }
	.palmImg {left: 0; top: auto; bottom: -60px; position: absolute; }
	
	
	@media screen and (min-width: 0px) and (max-width: 960px) { 
	  .rsContent { font-size: 22px; line-height: 28px; }
	  .blockHeadline { font-size: 32px; line-height: 32px;}
	  .blockSubHeadline { font-size: 26px; line-height: 32px }
	}
	
	@media screen and (min-width: 0px) and (max-width: 500px) { 
	  .royalSlider, .rsOverflow { height: 330px !important; }
	  .rsContent { font-size: 18px; line-height: 26px; }
	  .blockHeadline { font-size: 24px; line-height: 32px; }
	  .blockSubHeadline { font-size: 22px; line-height: 32px }
	}
</style>
    
  </head>
<body >
<br><br>

<!-- slider code start -->
<div class="row clearfix">
    <div class="col span_4 fwImage">
        <div id="slider-with-blocks-1" class="royalSlider rsMinW  ">
            
            <div class="rsContent slide1">
                <div class="bContainer">
                    <strong class="rsABlock txtCent blockHeadline">This is an animated block</strong>
                    <span class="rsABlock txtCent" data-move-effect="none">you can place it on any type of slide</span>
                </div>
            </div>
        	
             <div class="rsContent slide2">
                <div class="bContainer">
                    <strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none">Transition Types</strong>
                    <span class="rsABlock txtCent" data-move-effect="top" >from top  ↓</span>
                    <span class="rsABlock txtCent" data-move-effect="bottom">from bottom ↑</span>
                    <span class="rsABlock txtCent" data-move-effect="left">from left →</span>
                    <span class="rsABlock txtCent" data-move-effect="right">from right ←</span>
                    <span class="rsABlock txtCent" data-move-effect="none">just fade</span>
                </div>
            </div>
  
            <div class="rsContent slide3">
                <div class="bContainer">
                    <strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none"  data-delay="0">Customizable Animation</strong>
                    <span class="rsABlock txtCent" data-move-effect="left" data-delay="1000" data-move-offset="500" data-easing="easeOutBack" data-fade-effect="none">easing</span>
                    <span class="rsABlock txtCent" data-move-effect="left" data-delay="1500" data-move-offset="500" data-easing="easeOutCirc" data-fade-effect="none">delay</span>
                    <span class="rsABlock txtCent" data-move-effect="left" data-delay="2000" data-move-offset="500" data-speed="1000" data-fade-effect="none">speed</span>
                    <span class="rsABlock txtCent" data-move-effect="left" data-delay="2500" data-move-offset="50" data-fade-effect="true">move offset</span>
                </div>
            </div>
  
			<div class="rsContent slide4">
				<a class="rsImg" href="../img/palmbw.jpg">palms & beach</a>
                <div class="bContainer">
                    <strong class="rsABlock txtCent blockHeadline">Block may have any HTML</strong>
                    <span class="rsABlock txtCent" data-move-effect="none">and can be placed on any slide type</span>
                </div>
				<img class="rsABlock palmImg" data-fade-effect="none" data-move-effect="bottom" data-opposite="true" data-move-offset="450" data-delay="350" data-speed="300" data-easing="easeOutBack" src="../img/palms.png" />
				<div class="photoCopy">Photo by <a href="http://photo.aphecetche.fr/">Laurent Aphecetche</a></div>
			</div>
            
        </div>
    </div>
</div>

   
  
<script id="addJS">
jQuery(document).ready(function($) {
	$('#slider-with-blocks-1').royalSlider({
		arrowsNav: true,
		arrowsNavAutoHide: false,
		fadeinLoadedSlide: false,
		controlNavigationSpacing: 0,
		controlNavigation: 'bullets',
		imageScaleMode: 'none',
		imageAlignCenter:false,
		blockLoop: true,
		loop: true,
		numImagesToPreload: 6,
		transitionType: 'fade',
		keyboardNavEnabled: true,
		block:
		{
			delay: 400
		}
	});
});
</script>
  
  
  </body>
</html>